Javascript Introduction
Comments in Javascript
Javascript Variables
Difference between var, let and const in Javascript
Datatypes
Assignment Operators
Logical Operators
Comparison Operators
Actions alert, prompt & confirm

Javascript Flow Control
Conditional Statements in Javascript
Nullish coalescing operator in Javascript
Break and Continue in Javascript
Loops in javascript
for loop in Javascript
while loop

Javascript Functions
Javascript Functions
JavaScript Arrow Function

Javascript Objects
Javascript Objects

Javascript Array
Javascript Arrays

Javascript Error Handling
Error Handling in Javascript

Javascript ES6
Set
Javascript Spread Operator
Rest Parameter in Javascript

Javascript Asynchronous
Javascript Callback Function
Promises in Javascript
Promise Chaining
Async-Await in Javascript

Javascript DOM
DOM Document
DOM Elements
DOM Attributes
DOM Manipulation
DOM Node Lists
Javascript Events
DOM Traversing Elements
DOM EventListener

Javascript Class
Classes in javascript
Class Inheritance

Javascript Design Principles
SOLID - The Single responsibility principle in javascript
SOLID - Open-Closed principle in Javascript

Other Topics
Javascript Hoisting
Filter, Map and Reduce functions in Javascript
Closure in Javascript
Optional chaining operator in Javascript
Consoling in table format in javascript
Fetch API in Javascript
HTML web Storage API
Checking the online or offline status of the browser

HTML web Storage API

Published on: July 03, 2021 By T.Andrew Rayan

Browsers allow the web application to store data locally inside it using the web storage api's.

Web Storage allows us to store huge volume of data locally. All the pages in the web application from the same origin can store and access the data locally.

Web storage provides us with two api's to store the data on the browser.

1) LocalStorage

2) SessionStorage

LocalStorage:

The localStorage object allows us to store data with no expiration time. The data will be persistent even when the browser is closed.

The localStorage provides us with two functions to get and set the data to the local storage.

The setItem function is used to save the data to the local storage. It has two parameters, the first parameter is the key and the second parameter is the data.

The getItem function is used to get the data from the local storage using the key provided to save the data using setItem.

Example

// Store the value using setItem function.
localStorage.setItem("token","j2l432lj234j234lk24");

// Retrieve the value/data using getItem function.
localStorage.getItem("token");

In order to remove the data from the localStorage, we can use the removeItem function.

Example

// Remove the data from the localStorage.
localStorage.removeItem("token");

SessionStorage:

Unlike localStorage, sessionStorage is used to store the data to the browser. The only difference is that, the data will be available only for that session. If we close the browser tab, then the data will be removed.

To store the data in the sessionStorage we can use object notation to save the data.

Example

// To set the value to the local storage.
sessionStorage["name"] = "Andrew";

// To get the value from local storage.
console.log(sessionStorage["name"]);

HTML web Storage API

Published on: July 03, 2021 By T.Andrew Rayan

Categories

Most Read